<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box"></div>
    <script>
        // 创建 xhr 对象
        const xhr = new XMLHttpRequest()
        // 建立请求回应xhr.open(请求方式，请求地址，同步/异步)
        // 同步 ：false     异步：true      默认值：true
        xhr.open('get','http://zyxcl.xyz/music/api/banner',false)
        //等待请求响应
        xhr.onreadystatechange = ()=>{
            // xhr.readyState:4  =>  请求完成
            if(xhr.readyState === 4){
                // xhr.status : 200 =>  请求成功
                if(xhr.status === 200){
                    // JSON.parse  JSON字符串转对象
                    const data = JSON.parse(xhr.responseText)
                    const box = document.querySelector('.box')
                    console.log(data)
                    box.innerHTML = data.banners.map(item=>{
                        return `<img width = "300"src="${item.imageUrl}"/>`
                    })
                }else{
                    alert('请求失败'+ xhr.status)
                }
            }
        }
        // 发送请求
        xhr.send()
        console.log(123)
    </script>
</body>
</html>